<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://www.backbase.com/bjs/core" prefix="bjs" %>   

<f:subview id="expdesign">

  <bjs:view>
  	<bjs:panelSet rows="30% *">
  		<bjs:panel style="overflow:hidden">
  			<f:verbatim>
  				<b:box b:style="background-color: #F3F7F9;">
						<br />
						Selected experiment:<br />
						<input type="text" value="experiment1" size="25" readonly="true" />
						<center><b:button b:action="trigger" b:event="open"
							b:target="id('select_experiment')">Change...</b:button> <br />
						</center>

					</b:box>
					<b:modal id="select_experiment"	style="position:absolute; width: 500px; height: 300px; top:25px; left:30px;">
						<b:modalhead>Experiment selection</b:modalhead>
						<b:modalbody>
							<b:panelset b:rows="75% * ">

								<b:panel style="background-color: #F3F7F9; color: #333399; font:bold; padding: 0px 0 0 0px; overflow:auto;">
									<b:box
										b:style="background-color: #F3F7F9;" style="width: 100%;">
										<b:tree b:label="User" b:open="true"
											style="width: 100%; height: 90%;">
											<b:tree b:label="Folder 1">
												<b:tree b:label="experiment 1" />
												<b:tree b:label="Experiment 2" />
												<b:tree b:label="Experiment 3" />
											</b:tree>
											<b:tree b:label="Folder 2">
												<b:tree b:label="Experiment 4" />
												<b:tree b:label="Experiment 5" />
												<b:tree b:label="Experiment 6" />
											</b:tree>
											<b:tree b:label="folder 3">
												<b:tree b:label="folder 4">
													<b:tree b:label="Experiment 7" />
													<b:tree b:label="Experiment 8" />
												</b:tree>
												<b:tree b:label="folder 5">
													<b:tree b:label="Experiment 9" />
													<b:tree b:label="Experiment 10" />
												</b:tree>
												<b:tree b:label="folder 6">
													<b:tree b:label="Experiment 11" />
													<b:tree b:label="Experiment 12" />
												</b:tree>
											</b:tree>
										</b:tree>
									</b:box>
								</b:panel>

								<b:panel
									style="background-color: #F3F7F9; color: #333399; font:bold; padding: 0px 0 0 0px; overflow:hidden;">

									<div style="position: absolute; right: 0px; bottom: 0px;">
									<b:box b:style="background-color: #F3F7F9;"
										style="width: 100%;">
							
							selected: <input type="text" size="40" />
										<div style="position: absolute; right: 12px; bottom: -3px;">
										<b:button b:action="trigger" b:event="close"
											b:target="id('select_experiment')">Accept</b:button>
										<b:button
											b:action="trigger" b:event="close"
											b:target="id('select_experiment')">Close</b:button></div>


									</b:box></div>
								</b:panel>
							</b:panelset>
						</b:modalbody>
					</b:modal>
  			</f:verbatim>  
  		</bjs:panel>
		<bjs:panel	style="overflow:hidden;text-align:center">
  		 <%@include file="Experiment_viewer.jsp" %> 
  		</bjs:panel>
		  		
  	</bjs:panelSet> 
  
  </bjs:view>

</f:subview>